<template>
	<view class="container">
		<StatusTopBar></StatusTopBar>
		<!-- 设置页面 -->
		<view class="settings-page">
			<view class="header">
				<text class="title">设置</text>
			</view>

			<scroll-view class="content" scroll-y>
				<!-- 播放设置组 -->
				<view class="settings-group">
					<text class="group-title">播放设置</text>
					<view class="settings-item">
						<text>自动播放</text>
						<switch :checked="autoPlay" @change="onAutoPlayChange" color="#d502ff" style="transform:scale(0.8)" />
					</view>
					<view class="settings-item" @click="showFavotites()">
						<text>私人电台</text>
						<uni-icons type="right" size="48rpx" color="#B3B3B3" />
					</view>
					<view class="settings-item" @click="showHistories()">
						<text>历史记录</text>
						<uni-icons type="right" size="48rpx" color="#B3B3B3" />
					</view>
				</view>

				<!-- 主题设置组 -->
				<view class="settings-group">
					<text class="group-title">地图设置</text>
					<view class="settings-item" @click="showMapSettings()">
						<text>{{ baseMaps[settingStore.baseMap] }}</text>
						<uni-icons type="right" size="48rpx" color="#B3B3B3" />
					</view>
				</view>

				<!-- 数据管理组 -->
				<view class="settings-group">
					<text class="group-title">数据管理</text>
					<view class="settings-item" @click="clearCache">
						<text>清除缓存</text>
						<uni-icons type="right" size="48rpx" color="#B3B3B3" />
					</view>
					<view class="settings-item" @click="resetSettings">
						<text>恢复默认设置</text>
						<uni-icons type="right" size="48rpx" color="#B3B3B3" />
					</view>
				</view>

				<view class="footer">
					<text class="version">版本{{ version }}</text>
					<text>&nbsp;</text>
					<text class="about">关于音气</text>
				</view>
			</scroll-view>
		</view>
	</view>

	<uni-popup ref="mapPopup" type="bottom">
		<view class="popup-content">
			<view class="popup-header">
				<text>选择地图</text>
			</view>
			<view class="popup-options">
				<view v-for="(value, key, index) in baseMaps" :key="index" class="option-item" :class="{ 'active': key === settingStore.baseMap }" @click="selectBaseMap(key)">
					<text>{{ value }}</text>
				</view>
			</view>
			<view class="cancel-divider"></view>
			<view class="cancel-btn-area">
				<view class="cancel-btn" @click="closeMapPopup">
					<text>取消</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue';
	import { usePlayerStore } from '@/stores/usePlayerStore';
	import { showFavotites, showHistories } from '@/common/station_api';
	import { useSettingStore } from '@/stores/useSettingStore';
	const playerStore = usePlayerStore();
	const autoPlay = ref(playerStore.autoPlay);
	const onAutoPlayChange = (e : any) => {
		autoPlay.value = e.detail.value;
		playerStore.setAutoPlay(autoPlay.value);
	};

	const clearCache = () => {
		uni.showModal({
			title: '提示',
			content: '确定要清除缓存吗？',
			success: (res) => {
				if (res.confirm) {
					uni.clearStorageSync()
					uni.showToast({ title: '缓存已清除', icon: 'success' });
				}
			},
		});
	};

	const resetSettings = () => {
		uni.showModal({
			title: '提示',
			content: '确定要恢复默认设置吗？',
			success: (res) => {
				if (res.confirm) {
					// autoPlay.value = false;	
					playerStore.stop();
					playerStore.$reset()
					uni.showToast({ title: '已恢复默认设置', icon: 'success' });
				}
			},
		});
	};

	const version = computed(() => {
		let res = '未知';
		// #ifdef APP-PLUS
		res = plus.runtime.version as string;
		// #endif
		return res;
	});
	const mapPopup = ref();
	const settingStore = useSettingStore();

	const baseMaps : Record<string, string> = {
		'dark-gray': '暗黑地图',
		'satelite': '卫星地图',
		'carto-dark': '矢量地图'
	}
	const showMapSettings = () => mapPopup.value.open();
	const selectBaseMap = (baseMap : string) => {
		settingStore.setBaseMap(baseMap);
		mapPopup.value.close();
	};

	const closeMapPopup = () => {
		mapPopup.value.close();
	}
</script>

<style scoped>
	page {
		height: 100%;
	}

	.container {
		height: 100%;
		background: linear-gradient(135deg, #0B0B2B 0%, #1A1A4B 100%);
		color: #FFFFFF;
	}

	.header {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		/* background-color: #282828; */
		background: rgba(11, 11, 43, 0.85);
		backdrop-filter: blur(10px);
		flex-shrink: 0;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.content {
		flex: 1;
		height: calc(100% - 88rpx);
		overflow: auto;
	}

	.settings-group {
		margin: 24rpx 32rpx;
		/* background-color: #282828; */
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 32rpx;
		padding: 24rpx;
	}

	.group-title {
		font-size: 32rpx;
		color: #B3B3B3;
		margin-bottom: 24rpx;
	}

	.settings-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.settings-item:last-child {
		border-bottom: none;
	}

	.slider-wrapper {
		flex: 1;
		margin-left: 32rpx;
		/* margin-right: 16rpx; */
	}

	.settings-item>text {
		white-space: nowrap;
	}

	.footer {
		padding: 32rpx;
		text-align: center;
	}

	.version,
	.about {
		font-size: 28rpx;
		color: #B3B3B3;
		margin: 16rpx 0;
	}

	.popup-content {
		z-index: 100;
		border-radius: 32rpx 32rpx 0 0;
		box-shadow: 0 -12rpx 48rpx rgba(0, 0, 0, 0.18);
		padding-bottom: 24rpx;
		background: linear-gradient(135deg, #181845 0%, #23235a 100%);
	}

	.popup-header {
		padding: 24rpx 32rpx 16rpx 32rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		letter-spacing: 2rpx;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}

	.popup-options {
		padding: 0 32rpx;
	}

	.option-item {
		padding: 28rpx 0;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		transition: background 0.2s;
		border-radius: 16rpx;
	}

	.option-item:active,
	.option-item.active {
		background: rgba(255, 255, 255, 0.08);
		color: #d502ff;
		/* font-weight: 600; */
	}

	.option-item:last-child {
		border-bottom: none;
		margin-bottom: 0;
	}

	.cancel-divider {
		height: 1px;
		background: linear-gradient(90deg, transparent 0%, #fff2 50%, transparent 100%);
		margin: 16rpx 0;
	}

	.cancel-btn-area {
		padding: 0 32rpx;
	}

	.cancel-btn {
		padding: 24rpx 0;
		text-align: center;
		font-size: 32rpx;
		color: #ccc;
		font-weight: bold;
		border-radius: 16rpx;
		/* background: rgba(255, 255, 255, 0.06); */
		transition: background 0.2s;
	}

	.cancel-btn:active {
		background: rgba(255, 255, 255, 0.18);
	}
</style>